<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="generator" content="VuePress 2.0.0-beta.60">
    <script>
      (function() {
        const userMode = localStorage.getItem('vuepress-reco-color-scheme') || 'auto';
        const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

        if (userMode === 'dark' || (userMode === 'auto' && systemDarkMode)) {
          document.documentElement.classList.toggle('dark', true);
        }
      })();
    </script>
    <link rel="icon" href="/logo.png"><title>前端开发规范 | 王茂铭</title><meta name="description" content="Just playing around">
    <link rel="modulepreload" href="/wb/assets/app-32a7af8e.js"><link rel="modulepreload" href="/wb/assets/framework-c27b6911.js"><link rel="modulepreload" href="/wb/assets/standard.html-52035280.js"><link rel="modulepreload" href="/wb/assets/standard.html-14b52c51.js"><link rel="prefetch" href="/wb/assets/index.html-6d5e9dd3.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-8e728de0.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-71f98eb6.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-47172bd3.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-c4d32c30.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-75e9cb1a.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-a2c706b5.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-17c6444b.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-6958f27b.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-d981608d.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-ff4c5386.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-97c1c024.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-8596a00c.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-2434c570.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-0b4e72f2.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-70379254.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-bcce1cd3.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-e1575d57.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-c08582eb.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-4df8ef63.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-fa97dbe9.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-ea3cbcd8.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-5d7f901a.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-ec6cc437.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-8802c78f.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-c5b96a91.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-55c1ed81.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-f36d8351.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-da9b2394.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-5ac52d4f.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-27e68ae7.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-1834aef1.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-d4810458.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-560c14b4.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-35b38f45.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-93b00c29.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-f42fa99c.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-c7a62b28.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-7f3eeb92.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-c8596e07.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-f6681850.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-2773f5fc.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-6cf06f14.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-1a88d37b.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-c8e98ed0.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-800887e5.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-06f5ab5e.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-db4c3376.js" as="script"><link rel="prefetch" href="/wb/assets/031101.html-02798306.js" as="script"><link rel="prefetch" href="/wb/assets/031102.html-15b3adb4.js" as="script"><link rel="prefetch" href="/wb/assets/031501.html-3134e3b4.js" as="script"><link rel="prefetch" href="/wb/assets/122102.html-ceeb362a.js" as="script"><link rel="prefetch" href="/wb/assets/010601.html-3fe2b350.js" as="script"><link rel="prefetch" href="/wb/assets/010602.html-d33aafe0.js" as="script"><link rel="prefetch" href="/wb/assets/010603.html-731c8a98.js" as="script"><link rel="prefetch" href="/wb/assets/010604.html-6bc8d643.js" as="script"><link rel="prefetch" href="/wb/assets/010701.html-12966c2a.js" as="script"><link rel="prefetch" href="/wb/assets/010801.html-0fca227d.js" as="script"><link rel="prefetch" href="/wb/assets/011001.html-d10dc4a2.js" as="script"><link rel="prefetch" href="/wb/assets/011201.html-bbd7d0bc.js" as="script"><link rel="prefetch" href="/wb/assets/011202.html-f1b9f476.js" as="script"><link rel="prefetch" href="/wb/assets/011301.html-f7ba82d3.js" as="script"><link rel="prefetch" href="/wb/assets/011501.html-9196b987.js" as="script"><link rel="prefetch" href="/wb/assets/010501.html-43e0fee1.js" as="script"><link rel="prefetch" href="/wb/assets/031801.html-0a02ab60.js" as="script"><link rel="prefetch" href="/wb/assets/092102.html-74b61e87.js" as="script"><link rel="prefetch" href="/wb/assets/092103.html-2c9d1221.js" as="script"><link rel="prefetch" href="/wb/assets/081101.html-86de4307.js" as="script"><link rel="prefetch" href="/wb/assets/092001.html-20d934d3.js" as="script"><link rel="prefetch" href="/wb/assets/092101.html-1890511d.js" as="script"><link rel="prefetch" href="/wb/assets/092102.html-ae3f31b4.js" as="script"><link rel="prefetch" href="/wb/assets/092103.html-74cff86b.js" as="script"><link rel="prefetch" href="/wb/assets/092104.html-004f7a47.js" as="script"><link rel="prefetch" href="/wb/assets/092105.html-3f3fe144.js" as="script"><link rel="prefetch" href="/wb/assets/122101.html-f85b1d72.js" as="script"><link rel="prefetch" href="/wb/assets/122201.html-572b8a97.js" as="script"><link rel="prefetch" href="/wb/assets/092105.html-b6d3d031.js" as="script"><link rel="prefetch" href="/wb/assets/092106.html-709c9d31.js" as="script"><link rel="prefetch" href="/wb/assets/121501.html-6bc29a5d.js" as="script"><link rel="prefetch" href="/wb/assets/092101.html-f5635806.js" as="script"><link rel="prefetch" href="/wb/assets/092105.html-054223dd.js" as="script"><link rel="prefetch" href="/wb/assets/guide.html-561bbc0f.js" as="script"><link rel="prefetch" href="/wb/assets/011301.html-a89f05e1.js" as="script"><link rel="prefetch" href="/wb/assets/021401.html-b25135ac.js" as="script"><link rel="prefetch" href="/wb/assets/022001.html-3fd7ebe7.js" as="script"><link rel="prefetch" href="/wb/assets/022101.html-f6317717.js" as="script"><link rel="prefetch" href="/wb/assets/030801.html-cbbde2a3.js" as="script"><link rel="prefetch" href="/wb/assets/032201.html-33e3ac66.js" as="script"><link rel="prefetch" href="/wb/assets/022201.html-963afee1.js" as="script"><link rel="prefetch" href="/wb/assets/030501.html-84913c94.js" as="script"><link rel="prefetch" href="/wb/assets/home.html-3eb4d994.js" as="script"><link rel="prefetch" href="/wb/assets/plugin.html-1483d1d0.js" as="script"><link rel="prefetch" href="/wb/assets/vuePackage.html-0219c43d.js" as="script"><link rel="prefetch" href="/wb/assets/404.html-60b35caa.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-cc91309e.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-605912bc.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-beb31cc7.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-b61a46e1.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-f98e8ff2.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-fa9fcc1d.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-073d6df6.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-c3fee9e4.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-52c1909f.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-def60933.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-76d7399e.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-cc87ab1a.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-49a24dd3.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-f6c26c3a.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-4a7242ff.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-b00d5359.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-e2ee4194.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-e4115364.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-4521aa3a.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-c4b820ea.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-6fdefc04.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-50818995.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-2014b8cd.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-b1dc5ed7.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-2ddb2e51.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-72fa249f.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-217d2183.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-0b40087e.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-c52474d7.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-8489252c.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-2407d7b8.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-daf2f840.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-db0ba367.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-0999e780.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-ff3616e1.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-40ca6f0a.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-ba22b693.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-f989ee07.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-d7d4cc9f.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-6ee6582b.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-955dcc0f.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-5feeb1e7.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-a5819ddb.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-a45e3ca9.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-452ace3c.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-46c84a4f.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-b428ebd7.js" as="script"><link rel="prefetch" href="/wb/assets/index.html-8380941b.js" as="script"><link rel="prefetch" href="/wb/assets/031101.html-b6a75232.js" as="script"><link rel="prefetch" href="/wb/assets/031102.html-7868935d.js" as="script"><link rel="prefetch" href="/wb/assets/031501.html-a7e44746.js" as="script"><link rel="prefetch" href="/wb/assets/122102.html-6865b75f.js" as="script"><link rel="prefetch" href="/wb/assets/010601.html-dad7a79c.js" as="script"><link rel="prefetch" href="/wb/assets/010602.html-7fb1cd64.js" as="script"><link rel="prefetch" href="/wb/assets/010603.html-e563daab.js" as="script"><link rel="prefetch" href="/wb/assets/010604.html-815b9c8a.js" as="script"><link rel="prefetch" href="/wb/assets/010701.html-2b4e145e.js" as="script"><link rel="prefetch" href="/wb/assets/010801.html-b73655fc.js" as="script"><link rel="prefetch" href="/wb/assets/011001.html-2b9771e1.js" as="script"><link rel="prefetch" href="/wb/assets/011201.html-1af6d9d4.js" as="script"><link rel="prefetch" href="/wb/assets/011202.html-9093c19a.js" as="script"><link rel="prefetch" href="/wb/assets/011301.html-a03518e6.js" as="script"><link rel="prefetch" href="/wb/assets/011501.html-e90b5831.js" as="script"><link rel="prefetch" href="/wb/assets/010501.html-2ebe48c4.js" as="script"><link rel="prefetch" href="/wb/assets/031801.html-e190b745.js" as="script"><link rel="prefetch" href="/wb/assets/092102.html-047558e2.js" as="script"><link rel="prefetch" href="/wb/assets/092103.html-3f4ca6b9.js" as="script"><link rel="prefetch" href="/wb/assets/081101.html-c0375214.js" as="script"><link rel="prefetch" href="/wb/assets/092001.html-b2f5f9d7.js" as="script"><link rel="prefetch" href="/wb/assets/092101.html-40dbcdf2.js" as="script"><link rel="prefetch" href="/wb/assets/092102.html-111fa3dd.js" as="script"><link rel="prefetch" href="/wb/assets/092103.html-dfe62a63.js" as="script"><link rel="prefetch" href="/wb/assets/092104.html-6ea8f578.js" as="script"><link rel="prefetch" href="/wb/assets/092105.html-f58f55b7.js" as="script"><link rel="prefetch" href="/wb/assets/122101.html-a20220c8.js" as="script"><link rel="prefetch" href="/wb/assets/122201.html-7699eb69.js" as="script"><link rel="prefetch" href="/wb/assets/092105.html-ea49cb27.js" as="script"><link rel="prefetch" href="/wb/assets/092106.html-6d252224.js" as="script"><link rel="prefetch" href="/wb/assets/121501.html-4c68ef56.js" as="script"><link rel="prefetch" href="/wb/assets/092101.html-01673776.js" as="script"><link rel="prefetch" href="/wb/assets/092105.html-49fde8c8.js" as="script"><link rel="prefetch" href="/wb/assets/guide.html-85aeb00d.js" as="script"><link rel="prefetch" href="/wb/assets/011301.html-869da26f.js" as="script"><link rel="prefetch" href="/wb/assets/021401.html-ecbb30c7.js" as="script"><link rel="prefetch" href="/wb/assets/022001.html-f65da4af.js" as="script"><link rel="prefetch" href="/wb/assets/022101.html-bf352765.js" as="script"><link rel="prefetch" href="/wb/assets/030801.html-c3885c66.js" as="script"><link rel="prefetch" href="/wb/assets/032201.html-86eb91fa.js" as="script"><link rel="prefetch" href="/wb/assets/022201.html-998fc43b.js" as="script"><link rel="prefetch" href="/wb/assets/030501.html-61615073.js" as="script"><link rel="prefetch" href="/wb/assets/home.html-5d4ac598.js" as="script"><link rel="prefetch" href="/wb/assets/plugin.html-85fb2e2c.js" as="script"><link rel="prefetch" href="/wb/assets/vuePackage.html-6cc12cdb.js" as="script"><link rel="prefetch" href="/wb/assets/404.html-16732b58.js" as="script"><link rel="prefetch" href="/wb/assets/reco-valine-a0c1af1f.js" as="script">
    <link rel="preload" href="/wb/assets/style-cad7fe2b.css" as="style"><link rel="stylesheet" href="/wb/assets/style-cad7fe2b.css">
  </head>
  <body>
    <div id="app"><!--[--><div class="theme-container"><div class="common-wrapper show-series show-catalog"><div><header class="navbar-container"><!--[--><div class="site-brand nav-item"><img class="logo" src="/wb/logo.png" alt="王茂铭"><a href="/wb/" class="site-name can-hide">王茂铭</a></div><div class="nav-item navbar-links-wrapper" style=""><form class="search-box" role="search"><input type="search" autocomplete="off" spellcheck="false" value><!----></form><nav class="navbar-links"><!--[--><div class="navbar-links__item"><div class="dropdown-link"><button class="dropdown-link__title" type="button" aria-label="Categories"><span class="xicon-container left title"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Categories<!--]--></span></span><span class="arrow down"></span></button><button class="dropdown-link--mobile__title" type="button" aria-label="Categories"><span class="title"><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Categories<!--]--></span></span></span><span class="right arrow"></span></button><ul style="display:none;" class="dropdown-link__container"><!--[--><li class="dropdown-link__item"><a href="/wb/categories/shujujiegouyusuanfa/1/" class="link" aria-label="数据结构与算法"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->数据结构与算法<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/weiqianduanjiagou/1/" class="link" aria-label="微前端架构"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->微前端架构<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/mianshi/1/" class="link" aria-label="面试"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->面试<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/React/1/" class="link" aria-label="React"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->React<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/qianduan/1/" class="link" aria-label="前端"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->前端<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/vue/1/" class="link" aria-label="vue"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->vue<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/Angular/1/" class="link" aria-label="Angular"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Angular<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/WebGIS/1/" class="link" aria-label="WebGIS"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->WebGIS<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/gongjuyuyuedu/1/" class="link" aria-label="工具与阅读"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->工具与阅读<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/houduan/1/" class="link" aria-label="后端"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->后端<!--]--></span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links__item"><div class="dropdown-link"><button class="dropdown-link__title" type="button" aria-label="Tags"><span class="xicon-container left title"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Tags<!--]--></span></span><span class="arrow down"></span></button><button class="dropdown-link--mobile__title" type="button" aria-label="Tags"><span class="title"><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Tags<!--]--></span></span></span><span class="right arrow"></span></button><ul style="display:none;" class="dropdown-link__container"><!--[--><li class="dropdown-link__item"><a href="/wb/tags/shujujiegouyusuanfa/1/" class="link" aria-label="数据结构与算法"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->数据结构与算法<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/weiqianduanjiagou/1/" class="link" aria-label="微前端架构"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->微前端架构<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/qiankun/1/" class="link" aria-label="qiankun"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->qiankun<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/mianshi/1/" class="link" aria-label="面试"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->面试<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/react/1/" class="link" aria-label="react"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->react<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/element/1/" class="link" aria-label="element"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->element<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/tree/1/" class="link" aria-label="tree"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->tree<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/js/1/" class="link" aria-label="js"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->js<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/daimajiqiao/1/" class="link" aria-label="代码技巧"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->代码技巧<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/vue/1/" class="link" aria-label="vue"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->vue<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/diceng/1/" class="link" aria-label="底层"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->底层<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/angular/1/" class="link" aria-label="angular"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->angular<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/echars/1/" class="link" aria-label="echars"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->echars<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/keshihua/1/" class="link" aria-label="可视化"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->可视化<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/gaodeditu/1/" class="link" aria-label="高德地图"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->高德地图<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/shouce/1/" class="link" aria-label="手册"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->手册<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/es6/1/" class="link" aria-label="es6"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->es6<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/qianduan/1/" class="link" aria-label="前端"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->前端<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/jianrongxing/1/" class="link" aria-label="兼容性"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->兼容性<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/node/1/" class="link" aria-label="node"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->node<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/html/1/" class="link" aria-label="html"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->html<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/css/1/" class="link" aria-label="css"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->css<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/python/1/" class="link" aria-label="python"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->python<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/flask/1/" class="link" aria-label="flask"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->flask<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/Objective-C/1/" class="link" aria-label="Objective-C"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Objective-C<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/webpack/1/" class="link" aria-label="webpack"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->webpack<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/git/1/" class="link" aria-label="git"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->git<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/shuji/1/" class="link" aria-label="书籍"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->书籍<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/aihao/1/" class="link" aria-label="爱好"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->爱好<!--]--></span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links__item"><a href="/wb/" class="link router-link-active" aria-label="首页"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->首页<!--]--></span></span><!--[--><!--]--></a></div><div class="navbar-links__item"><div class="dropdown-link"><button class="dropdown-link__title" type="button" aria-label="文档"><span class="xicon-container left title"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->文档<!--]--></span></span><span class="arrow down"></span></button><button class="dropdown-link--mobile__title" type="button" aria-label="文档"><span class="title"><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->文档<!--]--></span></span></span><span class="right arrow"></span></button><ul style="display:none;" class="dropdown-link__container"><!--[--><li class="dropdown-link__item"><a href="/wb/docs/theme-reco/home" class="link" aria-label="公共方法"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->公共方法<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/docs/theme-reco/vuePackage" class="link" aria-label="vue组件包"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->vue组件包<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/docs/theme-reco/standard" class="link router-link-active" aria-label="前端代码规范"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->前端代码规范<!--]--></span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><!--]--></nav><span class="xicon-container btn-toggle-dark-mode btn--dark-mode"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" style="width:20px;height:20px;font-size:20px;color:inherit;"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></span><span class="xicon-container btn-toggle-menus"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" style="width:20px;height:20px;font-size:20px;color:inherit;"><circle cx="16" cy="8" r="2" fill="currentColor"></circle><circle cx="16" cy="16" r="2" fill="currentColor"></circle><circle cx="16" cy="24" r="2" fill="currentColor"></circle></svg></span></div><!--]--></header><div class="mobile-menus-container"><nav class="navbar-links mobile"><!--[--><div class="navbar-links__item"><div class="dropdown-link"><button class="dropdown-link__title" type="button" aria-label="Categories"><span class="xicon-container left title"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Categories<!--]--></span></span><span class="arrow down"></span></button><button class="dropdown-link--mobile__title" type="button" aria-label="Categories"><span class="title"><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Categories<!--]--></span></span></span><span class="right arrow"></span></button><ul style="display:none;" class="dropdown-link__container"><!--[--><li class="dropdown-link__item"><a href="/wb/categories/shujujiegouyusuanfa/1/" class="link" aria-label="数据结构与算法"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->数据结构与算法<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/weiqianduanjiagou/1/" class="link" aria-label="微前端架构"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->微前端架构<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/mianshi/1/" class="link" aria-label="面试"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->面试<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/React/1/" class="link" aria-label="React"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->React<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/qianduan/1/" class="link" aria-label="前端"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->前端<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/vue/1/" class="link" aria-label="vue"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->vue<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/Angular/1/" class="link" aria-label="Angular"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Angular<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/WebGIS/1/" class="link" aria-label="WebGIS"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->WebGIS<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/gongjuyuyuedu/1/" class="link" aria-label="工具与阅读"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->工具与阅读<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/categories/houduan/1/" class="link" aria-label="后端"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->后端<!--]--></span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links__item"><div class="dropdown-link"><button class="dropdown-link__title" type="button" aria-label="Tags"><span class="xicon-container left title"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Tags<!--]--></span></span><span class="arrow down"></span></button><button class="dropdown-link--mobile__title" type="button" aria-label="Tags"><span class="title"><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Tags<!--]--></span></span></span><span class="right arrow"></span></button><ul style="display:none;" class="dropdown-link__container"><!--[--><li class="dropdown-link__item"><a href="/wb/tags/shujujiegouyusuanfa/1/" class="link" aria-label="数据结构与算法"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->数据结构与算法<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/weiqianduanjiagou/1/" class="link" aria-label="微前端架构"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->微前端架构<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/qiankun/1/" class="link" aria-label="qiankun"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->qiankun<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/mianshi/1/" class="link" aria-label="面试"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->面试<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/react/1/" class="link" aria-label="react"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->react<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/element/1/" class="link" aria-label="element"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->element<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/tree/1/" class="link" aria-label="tree"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->tree<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/js/1/" class="link" aria-label="js"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->js<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/daimajiqiao/1/" class="link" aria-label="代码技巧"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->代码技巧<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/vue/1/" class="link" aria-label="vue"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->vue<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/diceng/1/" class="link" aria-label="底层"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->底层<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/angular/1/" class="link" aria-label="angular"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->angular<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/echars/1/" class="link" aria-label="echars"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->echars<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/keshihua/1/" class="link" aria-label="可视化"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->可视化<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/gaodeditu/1/" class="link" aria-label="高德地图"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->高德地图<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/shouce/1/" class="link" aria-label="手册"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->手册<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/es6/1/" class="link" aria-label="es6"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->es6<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/qianduan/1/" class="link" aria-label="前端"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->前端<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/jianrongxing/1/" class="link" aria-label="兼容性"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->兼容性<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/node/1/" class="link" aria-label="node"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->node<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/html/1/" class="link" aria-label="html"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->html<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/css/1/" class="link" aria-label="css"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->css<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/python/1/" class="link" aria-label="python"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->python<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/flask/1/" class="link" aria-label="flask"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->flask<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/Objective-C/1/" class="link" aria-label="Objective-C"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Objective-C<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/webpack/1/" class="link" aria-label="webpack"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->webpack<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/git/1/" class="link" aria-label="git"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->git<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/shuji/1/" class="link" aria-label="书籍"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->书籍<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/tags/aihao/1/" class="link" aria-label="爱好"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->爱好<!--]--></span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links__item"><a href="/wb/" class="link router-link-active" aria-label="首页"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->首页<!--]--></span></span><!--[--><!--]--></a></div><div class="navbar-links__item"><div class="dropdown-link"><button class="dropdown-link__title" type="button" aria-label="文档"><span class="xicon-container left title"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->文档<!--]--></span></span><span class="arrow down"></span></button><button class="dropdown-link--mobile__title" type="button" aria-label="文档"><span class="title"><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->文档<!--]--></span></span></span><span class="right arrow"></span></button><ul style="display:none;" class="dropdown-link__container"><!--[--><li class="dropdown-link__item"><a href="/wb/docs/theme-reco/home" class="link" aria-label="公共方法"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->公共方法<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/docs/theme-reco/vuePackage" class="link" aria-label="vue组件包"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->vue组件包<!--]--></span></span><!--[--><!--]--></a></li><li class="dropdown-link__item"><a href="/wb/docs/theme-reco/standard" class="link router-link-active" aria-label="前端代码规范"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->前端代码规范<!--]--></span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><!--]--></nav><div class="appearance"><span>Appearance</span><span class="xicon-container btn-toggle-dark-mode"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" style="width:20px;height:20px;font-size:20px;color:inherit;"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></span></div></div><div class="series-mask"></div><aside class="series-container"><div class="site-brand"><img class="logo" src="/wb/logo.png" alt="王茂铭"><a href="/wb/" class="site-name can-hide">王茂铭</a></div><!--[--><!--[--><section class="series-group series-item"><h5 class="series-heading">包管理工具</h5><ul><li><!--[--><a href="/wb/docs/theme-reco/home.html" class="link series-item" aria-label="js包管理工具"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->js包管理工具<!--]--></span></span><!--[--><!--]--></a><!--]--></li><li><!--[--><a href="/wb/docs/theme-reco/vuePackage.html" class="link series-item" aria-label="vue包管理工具"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->vue包管理工具<!--]--></span></span><!--[--><!--]--></a><!--]--></li></ul></section><!--]--><!--[--><section class="series-group series-item"><h5 class="series-heading active">前端代码规范</h5><ul><li><!--[--><a aria-current="page" href="/wb/docs/theme-reco/standard.html" class="router-link-active router-link-exact-active link router-link-active series-item active" aria-label="前端开发规范"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->前端开发规范<!--]--></span></span><!--[--><!--]--></a><!--]--></li></ul></section><!--]--><!--]--></aside><!--[--><main class="page-container"><h1 class="page-title">前端开发规范</h1><div class="page-info"><span class="xicon-container left"><!--[--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" class="xicon-icon" style="width:18px;height:18px;font-size:18px;color:inherit;"><path d="M16 4a5 5 0 1 1-5 5a5 5 0 0 1 5-5m0-2a7 7 0 1 0 7 7a7 7 0 0 0-7-7z" fill="currentColor"></path><path d="M26 30h-2v-5a5 5 0 0 0-5-5h-6a5 5 0 0 0-5 5v5H6v-5a7 7 0 0 1 7-7h6a7 7 0 0 1 7 7z" fill="currentColor"></path></svg><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->王茂铭<!--]--></span></span><span class="xicon-container left"><!--[--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" class="xicon-icon" style="width:18px;height:18px;font-size:18px;color:inherit;"><path d="M26 4h-4V2h-2v2h-8V2h-2v2H6c-1.1 0-2 .9-2 2v20c0 1.1.9 2 2 2h20c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 22H6V12h20v14zm0-16H6V6h4v2h2V6h8v2h2V6h4v4z" fill="currentColor"></path></svg><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->2023-04-11<!--]--></span></span><span class="xicon-container left"><!--[--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" class="xicon-icon" style="width:18px;height:18px;font-size:18px;color:inherit;"><path d="M11.17 6l3.42 3.41l.58.59H28v16H4V6h7.17m0-2H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2H16l-3.41-3.41A2 2 0 0 0 11.17 4z" fill="currentColor"></path></svg><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->前端<!--]--></span></span><span class="xicon-container left"><!--[--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" class="xicon-icon" style="width:18px;height:18px;font-size:18px;color:inherit;"><path d="M10 14a4 4 0 1 1 4-4a4.005 4.005 0 0 1-4 4zm0-6a2 2 0 1 0 1.998 2.004A2.002 2.002 0 0 0 10 8z" fill="currentColor"></path><path d="M16.644 29.415L2.586 15.354A2 2 0 0 1 2 13.941V4a2 2 0 0 1 2-2h9.941a2 2 0 0 1 1.414.586l14.06 14.058a2 2 0 0 1 0 2.828l-9.943 9.943a2 2 0 0 1-2.829 0zM4 4v9.942L18.058 28L28 18.058L13.942 4z" fill="currentColor"></path></svg><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->前端<!--]--></span></span><!----></div><div class="theme-reco-default-content"><div><h1 id="前端代码规范" tabindex="-1"><a class="header-anchor" href="#前端代码规范" aria-hidden="true">#</a> 前端代码规范</h1><p>规范的目的是为了编写高质量的代码，让团队成员每天得心情都是愉悦的，大家在一起是快乐的。程序员写好看的代码，不亚于写一行好看的字，好看的代码总是让人心旷神怡。 ----现代软件架构的复杂性需要协同开发完成，如何高效地协同呢？无规矩不成方圆，无规范难以协同，比如，制订交通法规表面上是要限制行车权，实际上是保障公众的人身安全，试想如果没有限速，没有红绿灯，谁还敢上路行驶。对软件来说，适当的规范和标准绝不是消灭代码内容的创造性、优雅性，而是限制过度个性化，以一种普遍认可的统一方式一起做事，提升协作效率，降低沟通成本。代码的字里行间流淌的是软件系统的血液，质量的提升是尽可能少踩坑，杜绝踩重复的坑，切实提升系统稳定性，码出质量。</p><h1 id="一-编程规约" tabindex="-1"><a class="header-anchor" href="#一-编程规约" aria-hidden="true">#</a> 一．编程规约</h1><h2 id="一-命名规范" tabindex="-1"><a class="header-anchor" href="#一-命名规范" aria-hidden="true">#</a> (一) 命名规范</h2><h3 id="_1-1-1-项目命名" tabindex="-1"><a class="header-anchor" href="#_1-1-1-项目命名" aria-hidden="true">#</a> 1.1.1 项目命名</h3><p>全部采用小写方式，以中线分隔。 正例：mall-management-system 反例：mall_management-system /mallManagementSystem</p><h3 id="_1-1-2-目录命名" tabindex="-1"><a class="header-anchor" href="#_1-1-2-目录命名" aria-hidden="true">#</a> 1.1.2 目录命名</h3><p>全部采用小写方式，以中划线分隔，有复数结构时，要采用复数命名法，缩写不用复数。 正例：scripts / styles / components / images / utils / layouts / demo-styles / demo-scripts / img / doc 反例：script / style / demo_scripts / demoStyles / imgs / docs 【特殊】VUE 的项目中的 components 中的组件目录，使用 kebab-case 命名。 正例：head-search / page-loading / authorized / notice-icon 反例：HeadSearch /PageLoading 【特殊】VUE 的项目中的除 components 组件目录外的所有目录也使用 kebab-case 命名。 正例：page-one / shopping-car / user-management 反例：ShoppingCar / UserManagement</p><h3 id="_1-1-3-js、css、scss、html、png-文件命名" tabindex="-1"><a class="header-anchor" href="#_1-1-3-js、css、scss、html、png-文件命名" aria-hidden="true">#</a> 1.1.3 JS、CSS、SCSS、HTML、PNG 文件命名</h3><p>全部采用小写方式，以中划线分隔。 正例：render-dom.js / signup.css / index.html / company-logo.png 反例：renderDom.js / UserManagement.html</p><h3 id="_1-1-4-命名严谨性" tabindex="-1"><a class="header-anchor" href="#_1-1-4-命名严谨性" aria-hidden="true">#</a> 1.1.4 命名严谨性</h3><p>代码中的命名严禁使用拼音与英文混合的方式，更不允许直接使用中文的方式。说明：正确的英文拼写和语法可以让阅读者易于理解，避免歧义。注意，即使纯拼音命名方式也要避免采用正例：henan / luoyang / rmb 等国际通用的名称，可视同英文 反例：DaZhePromotion [打折] / getPingfenByName() [评分] / int 某变量 = 3 杜绝完全不规范的缩写，避免望文不知义： 反例：AbstractClass “缩写”命名成 AbsClass；condition “缩写”命名成 condi，此类随意缩写严重降低了代码的可阅读性。</p><h2 id="二-html-规范-vue-template-同样适用" tabindex="-1"><a class="header-anchor" href="#二-html-规范-vue-template-同样适用" aria-hidden="true">#</a> (二) HTML 规范（Vue Template 同样适用）</h2><h3 id="_1-2-1-html-类型" tabindex="-1"><a class="header-anchor" href="#_1-2-1-html-类型" aria-hidden="true">#</a> 1.2.1 HTML 类型</h3><p>推荐使用 HTML5 的文档类型申明： （建议使用 text/html 格式的 HTML。避免使用 XHTML。XHTML 以及它的属性，比如 application/xhtml+xml 在浏览器中的应用支持与优化空间都十分有限）。</p><ul><li>规定字符编码</li><li>IE 兼容模式</li><li>规定字符编码</li><li>doctype 大写正例：</li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token operator">&lt;</span><span class="token operator">!</span><span class="token constant">DOCTYPE</span> html<span class="token operator">&gt;</span> <span class="token operator">&lt;</span>html<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>head<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>meta http<span class="token operator">-</span>equiv<span class="token operator">=</span><span class="token string">&quot;X-UA-Compatible&quot;</span> content<span class="token operator">=</span><span class="token string">&quot;IE=Edge&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>meta charset<span class="token operator">=</span><span class="token string">&quot;UTF-8&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>title<span class="token operator">&gt;</span>Page title<span class="token operator">&lt;</span><span class="token operator">/</span>title<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>head<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>body<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>img src<span class="token operator">=</span><span class="token string">&quot;images/company-logo.png&quot;</span> alt<span class="token operator">=</span><span class="token string">&quot;Company&quot;</span><span class="token operator">&gt;</span> <span class="token operator">&lt;</span><span class="token operator">/</span>body<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>html<span class="token operator">&gt;</span>

</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_1-2-2-缩进" tabindex="-1"><a class="header-anchor" href="#_1-2-2-缩进" aria-hidden="true">#</a> 1.2.2 缩进</h3><p>缩进使用 2 个空格（一个 tab）；嵌套的节点应该缩进。</p><h3 id="_1-2-3-分块注释" tabindex="-1"><a class="header-anchor" href="#_1-2-3-分块注释" aria-hidden="true">#</a> 1.2.3 分块注释</h3><p>在每一个块状元素，列表元素和表格元素后，加上一对 HTML 注释。</p><h3 id="_1-2-4-语义化标签" tabindex="-1"><a class="header-anchor" href="#_1-2-4-语义化标签" aria-hidden="true">#</a> 1.2.4 语义化标签</h3><p>HTML5 中新增很多语义化标签，所以优先使用语义化标签，避免一个页面都是 div 或者 p 标签。 正例</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token operator">&lt;</span>header<span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>header<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>footer<span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>footer<span class="token operator">&gt;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><p>反例</p><div class="language-html line-numbers-mode" data-ext="html"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_1-2-5-引号" tabindex="-1"><a class="header-anchor" href="#_1-2-5-引号" aria-hidden="true">#</a> 1.2.5 引号</h3><p>使用双引号(&quot; &quot;) 而不是单引号(’ &#39;) 。 正例：</p><div class="language-html line-numbers-mode" data-ext="html"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>”box”</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>反例：</p><div class="language-html line-numbers-mode" data-ext="html"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>’box’</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h2 id="三-css-规范" tabindex="-1"><a class="header-anchor" href="#三-css-规范" aria-hidden="true">#</a> (三) CSS 规范</h2><h3 id="_1-3-1-命名" tabindex="-1"><a class="header-anchor" href="#_1-3-1-命名" aria-hidden="true">#</a> 1.3.1 命名</h3><ul><li>类名使用小写字母，以中划线分隔</li><li>id 采用驼峰式命名</li><li>scss 中的变量、函数、混合、placeholder 采用驼峰式命名</li></ul><p>ID 和 class 的名称总是使用可以反应元素目的和用途的名称，或其他通用的名称，代替表象和晦涩难懂的名称。 不推荐：</p><div class="language-css line-numbers-mode" data-ext="css"><pre class="language-css"><code><span class="token selector">.fw-800</span> <span class="token punctuation">{</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> 800<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.red</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>推荐:</p><div class="language-css line-numbers-mode" data-ext="css"><pre class="language-css"><code><span class="token selector">.heavy</span> <span class="token punctuation">{</span>
<span class="token property">font-weight</span><span class="token punctuation">:</span> 800<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.important</span> <span class="token punctuation">{</span>	
<span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_1-3-2-选择器" tabindex="-1"><a class="header-anchor" href="#_1-3-2-选择器" aria-hidden="true">#</a> 1.3.2 选择器</h3><h4 id="_1-css-选择器中避免使用标签名" tabindex="-1"><a class="header-anchor" href="#_1-css-选择器中避免使用标签名" aria-hidden="true">#</a> 1) css 选择器中避免使用标签名</h4><p>从结构、表现、行为分离的原则来看，应该尽量避免 css 中出现 HTML 标签，并且在 css 选择器中出现标签名会存在潜在的问题。</p><h4 id="_2-使用直接子选择器" tabindex="-1"><a class="header-anchor" href="#_2-使用直接子选择器" aria-hidden="true">#</a> 2) 使用直接子选择器</h4><p>很多前端开发人员写选择器链的时候不使用直接子选择器（注：直接子选择器和后代选择器的区别）。有时，这可能会导致疼痛的设计问题并且有时候可能会很耗性能。然而，在任何情况下，这是一个非常不好的做法。如果你不写很通用的，需要匹配到 DOM 末端的选择器，你应该总是考虑直接子选择器。 不推荐:</p><div class="language-css line-numbers-mode" data-ext="css"><pre class="language-css"><code><span class="token selector">.content .title</span> <span class="token punctuation">{</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 2rem<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><p>推荐:</p><div class="language-css line-numbers-mode" data-ext="css"><pre class="language-css"><code><span class="token selector">.content &gt; .title</span> <span class="token punctuation">{</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 2rem<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_1-3-3-尽量使用缩写属性" tabindex="-1"><a class="header-anchor" href="#_1-3-3-尽量使用缩写属性" aria-hidden="true">#</a> 1.3.3 尽量使用缩写属性</h3><p>不推荐：</p><div class="language-css line-numbers-mode" data-ext="css"><pre class="language-css"><code><span class="token property">border-top-style</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">font-family</span><span class="token punctuation">:</span> palatino<span class="token punctuation">,</span> georgia<span class="token punctuation">,</span> serif<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token property">line-height</span><span class="token punctuation">:</span> 1.6<span class="token punctuation">;</span> <span class="token property">padding-bottom</span><span class="token punctuation">:</span> 2em<span class="token punctuation">;</span> <span class="token property">padding-left</span><span class="token punctuation">:</span> 1em<span class="token punctuation">;</span> <span class="token property">padding-right</span><span class="token punctuation">:</span> 1em<span class="token punctuation">;</span> <span class="token property">padding-top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>推荐：</p><div class="language-css line-numbers-mode" data-ext="css"><pre class="language-css"><code><span class="token property">border-top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token property">font</span><span class="token punctuation">:</span> 100%/1.6 palatino<span class="token punctuation">,</span> georgia<span class="token punctuation">,</span> serif<span class="token punctuation">;</span> 
<span class="token property">padding</span><span class="token punctuation">:</span> 0 1em 2em<span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_1-3-4-每个选择器及属性独占一行" tabindex="-1"><a class="header-anchor" href="#_1-3-4-每个选择器及属性独占一行" aria-hidden="true">#</a> 1.3.4 每个选择器及属性独占一行</h3><p>不推荐：</p><div class="language-css line-numbers-mode" data-ext="css"><pre class="language-css"><code><span class="token selector">button</span> <span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span><span class="token property">color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> #00a0e9<span class="token punctuation">;</span><span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>推荐：</p><div class="language-css line-numbers-mode" data-ext="css"><pre class="language-css"><code><span class="token selector">button</span> <span class="token punctuation">{</span>
<span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
<span class="token property">background</span><span class="token punctuation">:</span> #00a0e9<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_1-3-5-省略-0-后面的单位" tabindex="-1"><a class="header-anchor" href="#_1-3-5-省略-0-后面的单位" aria-hidden="true">#</a> 1.3.5 省略 0 后面的单位</h3><p>不推荐：</p><div class="language-css line-numbers-mode" data-ext="css"><pre class="language-css"><code><span class="token selector">div</span> <span class="token punctuation">{</span>
<span class="token property">padding-bottom</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0em<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>推荐：</p><div class="language-css line-numbers-mode" data-ext="css"><pre class="language-css"><code><span class="token selector">div</span> <span class="token punctuation">{</span>
<span class="token property">padding-bottom</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_1-3-6-避免使用-id-选择器及全局标签选择器防止污染全局样式" tabindex="-1"><a class="header-anchor" href="#_1-3-6-避免使用-id-选择器及全局标签选择器防止污染全局样式" aria-hidden="true">#</a> 1.3.6 避免使用 ID 选择器及全局标签选择器防止污染全局样式</h3><p>不推荐：</p><div class="language-css line-numbers-mode" data-ext="css"><pre class="language-css"><code><span class="token selector">#header</span> <span class="token punctuation">{</span> <span class="token property">padding-bottom</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0em<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><p>推荐：</p><div class="language-css line-numbers-mode" data-ext="css"><pre class="language-css"><code><span class="token selector">.header</span> <span class="token punctuation">{</span> <span class="token property">padding-bottom</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0em<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="四-less-规范" tabindex="-1"><a class="header-anchor" href="#四-less-规范" aria-hidden="true">#</a> (四) LESS 规范</h2><h3 id="_1-4-1-代码组织" tabindex="-1"><a class="header-anchor" href="#_1-4-1-代码组织" aria-hidden="true">#</a> 1.4.1 代码组织</h3><h4 id="_1-将公共-less-文件放置在-style-less-common-文件夹" tabindex="-1"><a class="header-anchor" href="#_1-将公共-less-文件放置在-style-less-common-文件夹" aria-hidden="true">#</a> 1) 将公共 less 文件放置在 style/less/common 文件夹</h4><p>例: // color.less,common.less</p><h4 id="_2-按以下顺序组织" tabindex="-1"><a class="header-anchor" href="#_2-按以下顺序组织" aria-hidden="true">#</a> 2) 按以下顺序组织</h4><p>1、 @import; 2、 变量声明; 3、 样式声明;</p><div class="language-less line-numbers-mode" data-ext="less"><pre class="language-less"><code><span class="token variable">@import</span> <span class="token string">&quot;mixins/size.less&quot;</span><span class="token punctuation">;</span>
<span class="token variable">@default-text-color<span class="token punctuation">:</span></span> #333<span class="token punctuation">;</span>
<span class="token selector">.page</span> <span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span> 960px<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0 auto<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_1-4-2-避免嵌套层级过多" tabindex="-1"><a class="header-anchor" href="#_1-4-2-避免嵌套层级过多" aria-hidden="true">#</a> 1.4.2 避免嵌套层级过多</h3><p>将嵌套深度限制在 3 级。对于超过 4 级的嵌套，给予重新评估。这可以避免出现过于详实的 CSS 选择器。避免大量的嵌套规则。当可读性受到影响时，将之打断。推荐避免出现多于 20 行的嵌套规则出现。 不推荐：</p><div class="language-less line-numbers-mode" data-ext="less"><pre class="language-less"><code><span class="token selector">.main</span> <span class="token punctuation">{</span>
    <span class="token selector">.title</span> <span class="token punctuation">{</span>
        <span class="token selector">.name</span> <span class="token punctuation">{</span>
            <span class="token property">color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>推荐：</p><div class="language-less line-numbers-mode" data-ext="less"><pre class="language-less"><code><span class="token selector">.main-title</span> <span class="token punctuation">{</span>
    <span class="token selector">.name</span> <span class="token punctuation">{</span>
        <span class="token property">color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="五-javascript-规范" tabindex="-1"><a class="header-anchor" href="#五-javascript-规范" aria-hidden="true">#</a> (五) Javascript 规范</h2><h3 id="_1-5-1-命名" tabindex="-1"><a class="header-anchor" href="#_1-5-1-命名" aria-hidden="true">#</a> 1.5.1 命名</h3><ol><li>采用小写驼峰命名 lowerCamelCase，代码中的命名均不能以下划线，也不能以下划线或美元符号结束 反例：</li></ol><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>_name <span class="token operator">/</span> name_ <span class="token operator">/</span> name$
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><ol start="2"><li>方法名、参数名、成员变量、局部变量都统一使用 lowerCamelCase 风格，必须遵从驼峰形式 正例：</li></ol><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>localValue <span class="token operator">/</span> <span class="token function">getHttpMessage</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">/</span> inputUserId
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p><em>其中 method 方法命名必须是动词或者动词+名词形式</em> 正例：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>saveShopCarData <span class="token operator">/</span>openShopCarInfoDialog
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>反例：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>save <span class="token operator">/</span> open <span class="token operator">/</span> show <span class="token operator">/</span> go
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>*特此说明，增删查改，详情统一使用如下 5 个单词，不得使用其他（目的是为了统一各个端）</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>add <span class="token operator">/</span> update <span class="token operator">/</span> <span class="token keyword">delete</span> <span class="token operator">/</span> detail <span class="token operator">/</span> <span class="token keyword">get</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>附： 函数方法常用的动词:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">get</span> 获取<span class="token operator">/</span><span class="token keyword">set</span> 设置<span class="token punctuation">,</span>add 增加<span class="token operator">/</span>remove 删除<span class="token punctuation">,</span>create 创建<span class="token operator">/</span>destory 销毁<span class="token punctuation">,</span> start 启动<span class="token operator">/</span>stop 停止<span class="token punctuation">,</span>open 打开<span class="token operator">/</span>close 关闭<span class="token punctuation">,</span>read 读取<span class="token operator">/</span>write 写入<span class="token punctuation">,</span>
load 载入<span class="token operator">/</span>save 保存<span class="token punctuation">,</span> begin 开始<span class="token operator">/</span>end 结束<span class="token punctuation">,</span>backup 备份<span class="token operator">/</span>restore 恢复<span class="token punctuation">,</span><span class="token keyword">import</span> 导入<span class="token operator">/</span><span class="token keyword">export</span> 导出<span class="token punctuation">,</span>split 分割<span class="token operator">/</span>merge 合并<span class="token punctuation">,</span>
inject 注入<span class="token operator">/</span>extract 提取<span class="token punctuation">,</span> attach 附着<span class="token operator">/</span>detach 脱离<span class="token punctuation">,</span> bind 绑定<span class="token operator">/</span>separate 分离<span class="token punctuation">,</span> view 查看<span class="token operator">/</span>browse 浏览<span class="token punctuation">,</span> edit 编辑<span class="token operator">/</span>modify 修改<span class="token punctuation">,</span> select 选取<span class="token operator">/</span>mark 标记<span class="token punctuation">,</span> copy 复制<span class="token operator">/</span>paste 粘贴<span class="token punctuation">,</span> undo 撤销<span class="token operator">/</span>redo 重做<span class="token punctuation">,</span> insert 插入<span class="token operator">/</span><span class="token keyword">delete</span> 移除<span class="token punctuation">,</span> add 加入<span class="token operator">/</span>append 添加<span class="token punctuation">,</span> clean 清理<span class="token operator">/</span>clear 清除<span class="token punctuation">,</span> index 索引<span class="token operator">/</span>sort 排序<span class="token punctuation">,</span> find 查找<span class="token operator">/</span>search 搜索<span class="token punctuation">,</span> increase 增加<span class="token operator">/</span>decrease 减少<span class="token punctuation">,</span> play 播放<span class="token operator">/</span>pause 暂停<span class="token punctuation">,</span> launch 启动<span class="token operator">/</span>run 运行<span class="token punctuation">,</span> compile 编译<span class="token operator">/</span>execute 执行<span class="token punctuation">,</span> debug 调试<span class="token operator">/</span>trace 跟踪<span class="token punctuation">,</span> observe 观察<span class="token operator">/</span>listen 监听<span class="token punctuation">,</span> build 构建<span class="token operator">/</span>publish 发布<span class="token punctuation">,</span> input 输入<span class="token operator">/</span>output 输出<span class="token punctuation">,</span> encode 编码<span class="token operator">/</span>decode 解码<span class="token punctuation">,</span> encrypt 加密<span class="token operator">/</span>decrypt 解密<span class="token punctuation">,</span> compress 压缩<span class="token operator">/</span>decompress 解压缩<span class="token punctuation">,</span> pack 打包<span class="token operator">/</span>unpack 解包<span class="token punctuation">,</span> parse 解析<span class="token operator">/</span>emit 生成<span class="token punctuation">,</span> connect 连接<span class="token operator">/</span>disconnect 断开<span class="token punctuation">,</span> send 发送<span class="token operator">/</span>receive 接收<span class="token punctuation">,</span> download 下载<span class="token operator">/</span>upload 上传<span class="token punctuation">,</span> refresh 刷新<span class="token operator">/</span>synchronize 同步<span class="token punctuation">,</span> update 更新<span class="token operator">/</span>revert 复原<span class="token punctuation">,</span> lock 锁定<span class="token operator">/</span>unlock 解锁<span class="token punctuation">,</span> check out 签出<span class="token operator">/</span>check <span class="token keyword">in</span> 签入<span class="token punctuation">,</span> submit 提交<span class="token operator">/</span>commit 交付<span class="token punctuation">,</span> push 推<span class="token operator">/</span>pull 拉<span class="token punctuation">,</span> expand 展开<span class="token operator">/</span>collapse 折叠<span class="token punctuation">,</span> enter 进入<span class="token operator">/</span>exit 退出<span class="token punctuation">,</span> abort 放弃<span class="token operator">/</span>quit 离开<span class="token punctuation">,</span> obsolete 废弃<span class="token operator">/</span>depreciate 废旧<span class="token punctuation">,</span> collect 收集<span class="token operator">/</span>aggregate 聚集
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ol start="3"><li>常量命名全部大写，单词间用下划线隔开，力求语义表达完整清楚，不要嫌名字长 正例：MAX_STOCK_COUNT 反例：MAX_COUNT</li></ol><h3 id="_1-5-2-代码格式" tabindex="-1"><a class="header-anchor" href="#_1-5-2-代码格式" aria-hidden="true">#</a> 1.5.2 代码格式</h3><ol><li>使用 2 个空格进行缩进 正例：</li></ol><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">if</span> <span class="token punctuation">(</span>x <span class="token operator">&lt;</span> y<span class="token punctuation">)</span> <span class="token punctuation">{</span> 
x <span class="token operator">+=</span> <span class="token number">10</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> 
x <span class="token operator">+=</span> <span class="token number">1</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ol><li>不同逻辑、不同语义、不同业务的代码之间插入一个空行分隔开来以提升可读性 说明：任何情形，没有必要插入多个空行进行隔开。</li></ol><h3 id="_1-5-3-字符串" tabindex="-1"><a class="header-anchor" href="#_1-5-3-字符串" aria-hidden="true">#</a> 1.5.3 字符串</h3><p>统一使用单引号(‘)，不使用双引号(“)。这在创建 HTML 字符串非常有好处：正例:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">if</span> <span class="token punctuation">(</span>x <span class="token operator">&lt;</span> y<span class="token punctuation">)</span> <span class="token punctuation">{</span> x <span class="token operator">+=</span> <span class="token number">10</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> x <span class="token operator">+=</span> <span class="token number">1</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>反例:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">if</span> <span class="token punctuation">(</span>x <span class="token operator">&lt;</span> y<span class="token punctuation">)</span> <span class="token punctuation">{</span> x <span class="token operator">+=</span> <span class="token number">10</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> x <span class="token operator">+=</span> <span class="token number">1</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_1-5-4-对象声明" tabindex="-1"><a class="header-anchor" href="#_1-5-4-对象声明" aria-hidden="true">#</a> 1.5.4 对象声明</h3><h4 id="_1-使用字面值创建对象" tabindex="-1"><a class="header-anchor" href="#_1-使用字面值创建对象" aria-hidden="true">#</a> 1) 使用字面值创建对象</h4><p>正例：let user = {}; 反例：let user = new Object();</p><h4 id="_2-使用字面量来代替对象构造器" tabindex="-1"><a class="header-anchor" href="#_2-使用字面量来代替对象构造器" aria-hidden="true">#</a> 2) 使用字面量来代替对象构造器</h4><p>正例： var user = { age: 0, name: 1,city: 3}; 反例： var user = new Object(); user.age = 0; user.name = 0; user.city = 0;</p><h3 id="_1-5-5-使用-es6" tabindex="-1"><a class="header-anchor" href="#_1-5-5-使用-es6" aria-hidden="true">#</a> 1.5.5 使用 ES6+</h3><p>必须优先使用 ES6+ 中新增的语法糖和函数。这将简化你的程序，并让你的代码更加灵活和可复 用。比如箭头函数、await/async ，解构， let ， for…of 等等。</p><h3 id="_1-5-6-括号" tabindex="-1"><a class="header-anchor" href="#_1-5-6-括号" aria-hidden="true">#</a> 1.5.6 括号</h3><p>下列关键字后必须有大括号（即使代码块的内容只有一行）：if, else, for, while, do, switch, try, catch, finally, with。 正例： 正例：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">if</span> <span class="token punctuation">(</span>condition<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">doSomething</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>反例：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">if</span> <span class="token punctuation">(</span>condition<span class="token punctuation">)</span> <span class="token function">doSomething</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="_1-5-7-undefined-判断" tabindex="-1"><a class="header-anchor" href="#_1-5-7-undefined-判断" aria-hidden="true">#</a> 1.5.7 undefined 判断</h3><p>永远不要直接使用 undefined 进行变量判断；使用 typeof 和字符串’undefined’对变量进行判断。 正例：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> person <span class="token operator">===</span> <span class="token string">&#39;undefined&#39;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token operator">...</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>反例：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">if</span> <span class="token punctuation">(</span>person <span class="token operator">===</span> <span class="token keyword">undefined</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token operator">...</span>
<span class="token punctuation">}</span>

</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_1-5-8-条件判断和循环最多三层" tabindex="-1"><a class="header-anchor" href="#_1-5-8-条件判断和循环最多三层" aria-hidden="true">#</a> 1.5.8 条件判断和循环最多三层</h3><p>条件判断能使用三目运算符和逻辑运算符解决的，就不要使用条件判断，但是谨记不要写太长的三目运算符。如果超过 3 层请抽成函数，并写清楚注释。</p><h3 id="_1-5-9this-的转换命名" tabindex="-1"><a class="header-anchor" href="#_1-5-9this-的转换命名" aria-hidden="true">#</a> 1.5.9 this 的转换命名</h3><p>对上下文 this 的引用只能使用 ’self’ 来命名。</p><h3 id="_1-5-10-慎用-console-log" tabindex="-1"><a class="header-anchor" href="#_1-5-10-慎用-console-log" aria-hidden="true">#</a> 1.5.10 慎用 console.log</h3><p>因 console.log 大量使用会有性能问题，所以在非 webpack 项目中谨慎使用 log 功能。</p><h1 id="二、vue-项目规范" tabindex="-1"><a class="header-anchor" href="#二、vue-项目规范" aria-hidden="true">#</a> 二、Vue 项目规范</h1><h2 id="一-vue-编码基础" tabindex="-1"><a class="header-anchor" href="#一-vue-编码基础" aria-hidden="true">#</a> (一) Vue 编码基础</h2><p>vue 项目规范以 Vue 官方规范（https://cn.vuejs.org/v2/style-guide/）中的 A 规范为基础，在其上面进行项目开发，故所有代码均遵守该规范。</p><p>请仔仔细细阅读 Vue 官方规范，切记，此为第一步。</p><h3 id="_2-1-1-组件规范" tabindex="-1"><a class="header-anchor" href="#_2-1-1-组件规范" aria-hidden="true">#</a> 2.1.1. 组件规范</h3><h4 id="_1-组件名为多个单词" tabindex="-1"><a class="header-anchor" href="#_1-组件名为多个单词" aria-hidden="true">#</a> 1) 组件名为多个单词</h4><p>组件名应该始终是多个单词组成（大于等于 2），且命名规范为 kebab-case 格式。 这样做可以避免跟现有的以及未来的 HTML 元素相冲突，因为所有的 HTML 元素名称都是单个单词的。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>正例：
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;TodoItem&#39;</span>
<span class="token comment">// ...</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
反例：
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;Todo&#39;</span><span class="token punctuation">,</span>
<span class="token comment">// ...</span>
<span class="token punctuation">}</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;todo-item&#39;</span><span class="token punctuation">,</span>
<span class="token comment">// ...</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="_2-组件文件名为-pascal-case-格式" tabindex="-1"><a class="header-anchor" href="#_2-组件文件名为-pascal-case-格式" aria-hidden="true">#</a> 2) 组件文件名为 pascal-case 格式</h4><p>正例： components/ |- my-component.vue 反例： components/ |- myComponent.vue |- MyComponent.vue</p><h4 id="_3-基础组件文件名为-base-开头-使用完整单词而不是缩写" tabindex="-1"><a class="header-anchor" href="#_3-基础组件文件名为-base-开头-使用完整单词而不是缩写" aria-hidden="true">#</a> 3) 基础组件文件名为 base 开头，使用完整单词而不是缩写</h4><p>正例：components/|- base-button.vue |- base-table.vue |- base-icon.vue 反例： components/ |- MyButton.vue |- VueTable.vue |- Icon.vue</p><h4 id="_4-和父组件紧密耦合的子组件应该以父组件名作为前缀命名" tabindex="-1"><a class="header-anchor" href="#_4-和父组件紧密耦合的子组件应该以父组件名作为前缀命名" aria-hidden="true">#</a> 4) 和父组件紧密耦合的子组件应该以父组件名作为前缀命名</h4><p>正例： components/ |- todo-list.vue |- todo-list-item.vue |- todo-list-item-button.vue |- user-profile-options.vue （完整单词） 反例： components/ |- TodoList.vue |- TodoItem.vue |- TodoButton.vue |- UProfOpts.vue （使用了缩写）</p><h4 id="_5-在-template-模版中使用组件-应使用-pascalcase-模式-并且使用自闭合组件" tabindex="-1"><a class="header-anchor" href="#_5-在-template-模版中使用组件-应使用-pascalcase-模式-并且使用自闭合组件" aria-hidden="true">#</a> 5) 在 Template 模版中使用组件，应使用 PascalCase 模式，并且使用自闭合组件</h4><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code>正例：
<span class="token comment">&lt;!-- 在单文件组件、字符串模板和 JSX 中 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>MyComponent</span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Row</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>table</span> <span class="token attr-name">:column</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>data<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Row</span><span class="token punctuation">&gt;</span></span>
反例：
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-component</span> <span class="token punctuation">/&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>row</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>table</span> <span class="token attr-name">:column</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>data<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>row</span><span class="token punctuation">&gt;</span></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="_6-组件的-data-必须是一个函数" tabindex="-1"><a class="header-anchor" href="#_6-组件的-data-必须是一个函数" aria-hidden="true">#</a> 6) 组件的 data 必须是一个函数</h4><p>当在组件中使用 data 属性的时候（除了 new Vue 外的任何地方），它的值必须是返回一个对象的函数。因为如果直接是一个对象的话，子组件之间的属性值会互相影响。 正例：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> <span class="token function">data</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> 
    <span class="token keyword">return</span> <span class="token punctuation">{</span> 
        <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;jack&#39;</span>
    <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>反例：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> 
    <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span> 
        <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;jack&#39;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>

</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="_7-prop-定义应该尽量详细" tabindex="-1"><a class="header-anchor" href="#_7-prop-定义应该尽量详细" aria-hidden="true">#</a> 7) Prop 定义应该尽量详细</h4><ul><li>必须使用 camelCase 驼峰命名</li><li>必须指定类型</li><li>必须加上注释，表明其含义</li><li>必须加上 required 或者 default，两者二选其一</li><li>如果有业务需要，必须加上 validator 验证正例：</li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token literal-property property">props</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token comment">// 组件状态，用于控制组件的颜色 status: { type: String, required: true,</span>
<span class="token function-variable function">validator</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">[</span>
<span class="token string">&#39;succ&#39;</span><span class="token punctuation">,</span>
<span class="token string">&#39;info&#39;</span><span class="token punctuation">,</span>
<span class="token string">&#39;error&#39;</span>
<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token operator">!==</span> <span class="token operator">-</span><span class="token number">1</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token comment">// 用户级别，用于显示皇冠个数</span>
userLevel：<span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span>String<span class="token punctuation">,</span>
<span class="token literal-property property">required</span><span class="token operator">:</span> <span class="token boolean">true</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>

</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="_8-为组件样式设置作用域" tabindex="-1"><a class="header-anchor" href="#_8-为组件样式设置作用域" aria-hidden="true">#</a> 8) 为组件样式设置作用域</h4><p>正例：</p><div class="language-html line-numbers-mode" data-ext="html"><pre class="language-html"><code>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn btn-close<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>X<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!-- 使用 `scoped` 特性 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">scoped</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
<span class="token selector">.btn-close</span> <span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>

</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>反例：</p><div class="language-html line-numbers-mode" data-ext="html"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn btn-close<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>X<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!-- 没有使用 `scoped` 特性 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
<span class="token selector">.btn-close</span> <span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>

</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="_9-如果特性元素较多-应该主动换行" tabindex="-1"><a class="header-anchor" href="#_9-如果特性元素较多-应该主动换行" aria-hidden="true">#</a> 9) 如果特性元素较多，应该主动换行</h4><p>正例：</p><div class="language-html line-numbers-mode" data-ext="html"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>MyComponent</span> 
<span class="token attr-name">foo</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>a<span class="token punctuation">&quot;</span></span> 
<span class="token attr-name">bar</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>b<span class="token punctuation">&quot;</span></span> 
<span class="token attr-name">baz</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>c<span class="token punctuation">&quot;</span></span>
 <span class="token attr-name">foo</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>a<span class="token punctuation">&quot;</span></span> 
<span class="token attr-name">bar</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>b<span class="token punctuation">&quot;</span></span> 
<span class="token attr-name">baz</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>c<span class="token punctuation">&quot;</span></span> 
<span class="token attr-name">foo</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>a<span class="token punctuation">&quot;</span></span> 
<span class="token attr-name">bar</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>b<span class="token punctuation">&quot;</span></span> 
<span class="token attr-name">baz</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>c<span class="token punctuation">&quot;</span></span>
<span class="token punctuation">/&gt;</span></span>

</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>反例：</p><div class="language-html line-numbers-mode" data-ext="html"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>MyComponent</span> <span class="token attr-name">foo</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>a<span class="token punctuation">&quot;</span></span> <span class="token attr-name">bar</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>b<span class="token punctuation">&quot;</span></span> <span class="token attr-name">baz</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>c<span class="token punctuation">&quot;</span></span> <span class="token attr-name">foo</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>a<span class="token punctuation">&quot;</span></span> <span class="token attr-name">bar</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>b<span class="token punctuation">&quot;</span></span> <span class="token attr-name">baz</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>c<span class="token punctuation">&quot;</span></span> <span class="token attr-name">foo</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>a<span class="token punctuation">&quot;</span></span> <span class="token attr-name">bar</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>b<span class="token punctuation">&quot;</span></span> <span class="token attr-name">baz</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>c<span class="token punctuation">&quot;</span></span> <span class="token attr-name">foo</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>a<span class="token punctuation">&quot;</span></span> <span class="token attr-name">bar</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>b<span class="token punctuation">&quot;</span></span> <span class="token attr-name">baz</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>c<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="_2-1-2-模板中使用简单的表达式" tabindex="-1"><a class="header-anchor" href="#_2-1-2-模板中使用简单的表达式" aria-hidden="true">#</a> 2.1.2. 模板中使用简单的表达式</h3><p>组件模板应该只包含简单的表达式，复杂的表达式则应该重构为计算属性或方法。复杂表达式会让你的模板变得不那么声明式。我们应该尽量描述应该出现的是什么，而非如何计算那个值。而且计算属性和方法使得代码可以重用。 正例：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token operator">&lt;</span>template<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>p<span class="token operator">&gt;</span><span class="token punctuation">{</span><span class="token punctuation">{</span> normalizedFullName <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>p<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>
<span class="token comment">// 复杂表达式已经移入一个计算属性</span>
<span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span> 
    <span class="token function-variable function">normalizedFullName</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> 
        <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>fullName<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">&#39; &#39;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>
            <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">word</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> 
                <span class="token keyword">return</span> word<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">toUpperCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> word<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">&#39; &#39;</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>反例：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token operator">&lt;</span>template<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>p<span class="token operator">&gt;</span>
<span class="token punctuation">{</span><span class="token punctuation">{</span>
fullName<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">&#39; &#39;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">word</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> word<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">toUpperCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> word<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">&#39; &#39;</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">}</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>p<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>

</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_2-1-3-指令都使用缩写形式" tabindex="-1"><a class="header-anchor" href="#_2-1-3-指令都使用缩写形式" aria-hidden="true">#</a> 2.1.3 指令都使用缩写形式</h3><p>指令推荐都使用缩写形式，(用 : 表示 v-bind: 、用 @ 表示 v-on: 和用 # 表示 v-slot:) 正例：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token operator">&lt;</span>input
@input<span class="token operator">=</span><span class="token string">&quot;onInput&quot;</span>
@focus<span class="token operator">=</span><span class="token string">&quot;onFocus&quot;</span>
<span class="token operator">&gt;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>反例：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token operator">&lt;</span>input
v<span class="token operator">-</span>on<span class="token operator">:</span>input<span class="token operator">=</span><span class="token string">&quot;onInput&quot;</span>
@focus<span class="token operator">=</span><span class="token string">&quot;onFocus&quot;</span>
<span class="token operator">&gt;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_2-1-4-标签顺序保持一致" tabindex="-1"><a class="header-anchor" href="#_2-1-4-标签顺序保持一致" aria-hidden="true">#</a> 2.1.4 标签顺序保持一致</h3><p>单文件组件应该总是让标签顺序保持为 `</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>正例：
<span class="token operator">&lt;</span>template<span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script<span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>style<span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>style<span class="token operator">&gt;</span>
反例：
<span class="token operator">&lt;</span>template<span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>style<span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>style<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script<span class="token operator">&gt;</span><span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_2-1-5-必须为-v-for-设置键值-key" tabindex="-1"><a class="header-anchor" href="#_2-1-5-必须为-v-for-设置键值-key" aria-hidden="true">#</a> 2.1.5 必须为 v-for 设置键值 key</h3><h3 id="_2-1-6-v-show-与-v-if-选择" tabindex="-1"><a class="header-anchor" href="#_2-1-6-v-show-与-v-if-选择" aria-hidden="true">#</a> 2.1.6 v-show 与 v-if 选择</h3><p>如果运行时，需要非常频繁地切换，使用 v-show ；如果在运行时，条件很少改变，使用 v-if。</p><h3 id="_2-1-7-script-标签内部结构顺序" tabindex="-1"><a class="header-anchor" href="#_2-1-7-script-标签内部结构顺序" aria-hidden="true">#</a> 2.1.7 script 标签内部结构顺序</h3><p>name &gt; components &gt; mixins &gt; props &gt; data &gt; computed &gt; watch &gt; filter &gt; 钩子函数（钩子函数按其执行顺序） &gt; methods</p><h3 id="_2-1-8-vue-router-规范" tabindex="-1"><a class="header-anchor" href="#_2-1-8-vue-router-规范" aria-hidden="true">#</a> 2.1.8 Vue Router 规范</h3><h4 id="_1-页面跳转数据传递使用路由参数" tabindex="-1"><a class="header-anchor" href="#_1-页面跳转数据传递使用路由参数" aria-hidden="true">#</a> 1) 页面跳转数据传递使用路由参数</h4><p>页面跳转，例如 A 页面跳转到 B 页面，需要将 A 页面的数据传递到 B 页面，推荐使用路由参数进行传参，而不是将需要传递的数据保存 vuex，然后在 B 页面取出 vuex 的数据，因为如果在 B 页面刷新会导致 vuex 数据丢失，导致 B 页面无法正常显示数据。</p><p>正例：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>
<span class="token keyword">let</span> id <span class="token operator">=</span> <span class="token string">&#39; 123&#39;</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>$router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;userCenter&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">query</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> id <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="_2-使用路由懒加载-延迟加载-机制" tabindex="-1"><a class="header-anchor" href="#_2-使用路由懒加载-延迟加载-机制" aria-hidden="true">#</a> 2) 使用路由懒加载（延迟加载）机制</h4><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token punctuation">{</span>
<span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">&#39;/uploadAttachment&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;uploadAttachment&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">meta</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;上传附件&#39;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">&#39;@/view/components/uploadAttachment/index.vue&#39;</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>

</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="_3-router-中的命名规范" tabindex="-1"><a class="header-anchor" href="#_3-router-中的命名规范" aria-hidden="true">#</a> 3) router 中的命名规范</h4><p>path、childrenPoints 命名规范采用 kebab-case 命名规范（尽量 vue 文件的目录结构保持一致，因为目录、文件名都是 kebab-case，这样很方便找到对应的文件） name 命名规范采用 kebab-case 命名规范且和 component 组件名保持一致！（因为要保持 keep-alive 特性，keep-alive 按照 component 的 name 进行缓存，所以两者必须高度保持一致）</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// 动态加载</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> reload <span class="token operator">=</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">&#39;/reload&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;reload&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> Main<span class="token punctuation">,</span> <span class="token literal-property property">meta</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;动态加载&#39;</span><span class="token punctuation">,</span><span class="token literal-property property">icon</span><span class="token operator">:</span> <span class="token string">&#39;icon iconfont&#39;</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">&#39;/reload/smart-reload-list&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;SmartReloadList&#39;</span><span class="token punctuation">,</span> 
    <span class="token literal-property property">meta</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;SmartReload&#39;</span><span class="token punctuation">,</span> 
    <span class="token literal-property property">childrenPoints</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;查询&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;smart-reload-search&#39;</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;执行 reload&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;smart-reload-update&#39;</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span><span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;查看执行结果&#39;</span><span class="token punctuation">,</span><span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;smart-reload-result&#39;</span><span class="token punctuation">}</span>
    <span class="token punctuation">]</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token literal-property property">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span> <span class="token operator">&gt;</span><span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">&#39;@/views/reload/smart-reload/smart-reload-list.vue&#39;</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="_4-router-中的-path-命名规范" tabindex="-1"><a class="header-anchor" href="#_4-router-中的-path-命名规范" aria-hidden="true">#</a> 4) router 中的 path 命名规范</h4><p>path 除了采用 kebab-case 命名规范以外，必须以 / 开头，即使是 children 里的 path 也要以 / 开头。 目的： 经常有这样的场景：某个页面有问题，要立刻找到这个 vue 文件，如果不用以/开头，path 为 parent 和 children 组成的，可能经常需要在 router 文件里搜索多次才能找到，而如果以/开头，则能立刻搜索到对应的组件。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">&#39;/file&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;File&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> Main<span class="token punctuation">,</span> <span class="token literal-property property">meta</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">&#39;文件服务&#39;</span><span class="token punctuation">,</span>
<span class="token literal-property property">icon</span><span class="token operator">:</span> <span class="token string">&#39;ios-cloud-upload&#39;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">&#39;/file/file-list&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;FileList&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span> <span class="token operator">&gt;</span><span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">&#39;@/views/file/file-list.vue&#39;</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">&#39;/file/file-add&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;FileAdd&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span> <span class="token operator">&gt;</span><span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">&#39;@/views/file/file-add.vue&#39;</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">&#39;/file/file-update&#39;</span><span class="token punctuation">,</span>
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;FileUpdate&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span> <span class="token operator">&gt;</span><span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">&#39;@/views/file/file-update.vue&#39;</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span>

</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="二-vue-项目目录规范" tabindex="-1"><a class="header-anchor" href="#二-vue-项目目录规范" aria-hidden="true">#</a> (二) Vue 项目目录规范</h2><h3 id="_2-2-1-基础" tabindex="-1"><a class="header-anchor" href="#_2-2-1-基础" aria-hidden="true">#</a> 2.2.1 基础</h3><p>vue 项目中的所有命名一定要与后端命名统一。 比如权限：后端 privilege, 前端无论 router , store, api 等都必须使用 privielege 单词！</p><h3 id="_2-2-2-使用-vue-cli-脚手架" tabindex="-1"><a class="header-anchor" href="#_2-2-2-使用-vue-cli-脚手架" aria-hidden="true">#</a> 2.2.2 使用 Vue-cli 脚手架</h3><p>使用 vue-cli3 来初始化项目，项目名按照上面的命名规范。</p><h3 id="_2-2-3-目录说明" tabindex="-1"><a class="header-anchor" href="#_2-2-3-目录说明" aria-hidden="true">#</a> 2.2.3 目录说明</h3><p>目录名按照上面的命名规范，其中 components 组件用大驼峰，其余除 components 组件目录外的所有目录均使用 kebab-case 或者大驼峰命名。</p><table><thead><tr><th style="text-align:left;">目录</th><th style="text-align:right;">介绍</th></tr></thead><tbody><tr><td style="text-align:left;">src</td><td style="text-align:right;">源码目录</td></tr><tr><td style="text-align:left;">-- api</td><td style="text-align:right;">所有 api 接口</td></tr><tr><td style="text-align:left;">-- assets</td><td style="text-align:right;">静态资源，images, icons, styles 等</td></tr><tr><td style="text-align:left;">-- components</td><td style="text-align:right;">公用组件</td></tr><tr><td style="text-align:left;">-- i18n</td><td style="text-align:right;">多语言</td></tr><tr><td style="text-align:left;">-- config</td><td style="text-align:right;">配置信息</td></tr><tr><td style="text-align:left;">-- constants</td><td style="text-align:right;">常量信息，项目所有 Enum, 全局常量等</td></tr><tr><td style="text-align:left;">-- directives</td><td style="text-align:right;">自定义指令</td></tr><tr><td style="text-align:left;">-- filters</td><td style="text-align:right;">过滤器，全局工具</td></tr><tr><td style="text-align:left;">-- datas</td><td style="text-align:right;">模拟数据，临时存放</td></tr><tr><td style="text-align:left;">-- lib</td><td style="text-align:right;">外部引用的插件存放及修改文件</td></tr><tr><td style="text-align:left;">-- mock</td><td style="text-align:right;">模拟接口，临时存放</td></tr><tr><td style="text-align:left;">-- plugins</td><td style="text-align:right;">插件，全局使用</td></tr><tr><td style="text-align:left;">-- router</td><td style="text-align:right;">路由，统一管理</td></tr><tr><td style="text-align:left;">-- themes</td><td style="text-align:right;">源码目录</td></tr><tr><td style="text-align:left;">-- views</td><td style="text-align:right;">视图目录</td></tr><tr><td style="text-align:left;">-- -- role</td><td style="text-align:right;">role 模块名</td></tr><tr><td style="text-align:left;">-- -- -- index.vue</td><td style="text-align:right;">role 列表页面</td></tr><tr><td style="text-align:left;">-- -- components</td><td style="text-align:right;">模块通用组件文件夹</td></tr><tr><td style="text-align:left;">-- package.json</td><td style="text-align:right;">package.json</td></tr><tr><td style="text-align:left;">-- README.md</td><td style="text-align:right;">备注文件</td></tr><tr><td style="text-align:left;">-- vue.config.js</td><td style="text-align:right;">Vue CLI 3 配置</td></tr></tbody></table><h4 id="_1-api-目录" tabindex="-1"><a class="header-anchor" href="#_1-api-目录" aria-hidden="true">#</a> 1) api 目录</h4><ul><li>文件、变量命名要与后端保持一致。</li><li>此目录对应后端 API 接口，按照后端一个 controller 一个 api.js 文件。若项目较大时，可 以按照业务划分子目录，并与后端保持一致。</li><li>api 中的方法名字要与后端 api url 尽量保持语义高度一致性。</li><li>对于 api 中的每个方法要添加注释，注释与后端 swagger 文档保持一致。 正例：</li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>
后端 url： EmployeeController<span class="token punctuation">.</span>java
<span class="token operator">/</span>employee<span class="token operator">/</span>add
<span class="token operator">/</span>employee<span class="token operator">/</span><span class="token keyword">delete</span><span class="token operator">/</span><span class="token punctuation">{</span>id<span class="token punctuation">}</span>
<span class="token operator">/</span>employee<span class="token operator">/</span>update 前端： employee<span class="token punctuation">.</span>js
<span class="token comment">// 添加员工</span>
<span class="token keyword">function</span> <span class="token function">addEmployee</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token function">postAxios</span><span class="token punctuation">(</span><span class="token string">&#39;/employee/add&#39;</span><span class="token punctuation">,</span> data<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token comment">// 更新员工信息</span>
<span class="token keyword">function</span> <span class="token function">updateEmployee</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token function">postAxios</span><span class="token punctuation">(</span><span class="token string">&#39;/employee/update&#39;</span><span class="token punctuation">,</span> data<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token comment">// 删除员工</span>
<span class="token keyword">function</span> <span class="token function">deleteEmployee</span><span class="token punctuation">(</span><span class="token parameter">employeeId</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token function">postAxios</span><span class="token punctuation">(</span><span class="token string">&#39;/employee/delete/&#39;</span> <span class="token operator">+</span> employeeId<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token comment">// 获取员工信息</span>
<span class="token keyword">function</span> <span class="token function">getEmployee</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token function">postAxios</span><span class="token punctuation">(</span><span class="token string">&#39;/employee/get/&#39;</span><span class="token punctuation">,</span> data<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token comment">// 获取员工信息列表</span>
<span class="token keyword">function</span> <span class="token function">getEmployeeList</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token function">postAxios</span><span class="token punctuation">(</span><span class="token string">&#39;/employee/getlist/&#39;</span><span class="token punctuation">,</span> data<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="_2-assets-目录" tabindex="-1"><a class="header-anchor" href="#_2-assets-目录" aria-hidden="true">#</a> 2) assets 目录</h4><p>assets 为静态资源，里面存放 images, styles, icons 等静态资源，静态资源命名格式为 kebab-case |assets |-- icons |-- images | |-- background-color.png | |-- upload-header.png |-- styles</p><h4 id="_3-components-目录" tabindex="-1"><a class="header-anchor" href="#_3-components-目录" aria-hidden="true">#</a> 3) components 目录</h4><p>此目录应按照组件进行目录划分，目录命名为 kebab-case，组件命名规则也为 kebab-case |components |-- error-log | |-- index.vue | |-- index.less |-- markdown-editor | |-- index.vue | |-- index.js |-- kebab-case</p><h4 id="_4-constants-目录" tabindex="-1"><a class="header-anchor" href="#_4-constants-目录" aria-hidden="true">#</a> 4) constants 目录</h4><p>此目录存放项目所有常量，如果常量在 vue 中使用，请使用 vue-enum 插件 <a href="https://www.npmjs.com/package/vue-enum" target="_blank" rel="noopener noreferrer">https://www.npmjs.com/package/vue-enum<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>目录结构：
<span class="token operator">|</span>constants
<span class="token operator">|</span><span class="token operator">--</span> index<span class="token punctuation">.</span>js
<span class="token operator">|</span><span class="token operator">--</span> role<span class="token punctuation">.</span>js
<span class="token operator">|</span><span class="token operator">--</span> employee<span class="token punctuation">.</span>js
例子： employee<span class="token punctuation">.</span>js
<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token constant">EMPLOYEE_STATUS</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token constant">NORMAL</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token literal-property property">desc</span><span class="token operator">:</span> <span class="token string">&#39;正常&#39;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token constant">DISABLED</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token literal-property property">desc</span><span class="token operator">:</span> <span class="token string">&#39;禁用&#39;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token constant">DELETED</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
<span class="token literal-property property">desc</span><span class="token operator">:</span> <span class="token string">&#39;已删除&#39;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token constant">EMPLOYEE_ACCOUNT_TYPE</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token constant">QQ</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
<span class="token literal-property property">desc</span><span class="token operator">:</span> <span class="token string">&#39;QQ 登录&#39;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token constant">WECHAT</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
<span class="token literal-property property">desc</span><span class="token operator">:</span> <span class="token string">&#39;微信登录&#39;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token constant">DINGDING</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
<span class="token literal-property property">desc</span><span class="token operator">:</span> <span class="token string">&#39;钉钉登录&#39;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token constant">USERNAME</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span>
<span class="token literal-property property">desc</span><span class="token operator">:</span> <span class="token string">&#39;用户名密码登录&#39;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
<span class="token constant">EMPLOYEE_STATUS</span><span class="token punctuation">,</span>
<span class="token constant">EMPLOYEE_ACCOUNT_TYPE</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="_5-router-与-store-目录" tabindex="-1"><a class="header-anchor" href="#_5-router-与-store-目录" aria-hidden="true">#</a> 5) router 与 store 目录</h4><p>这两个目录一定要将业务进行拆分，不能放到一个 js 文件里。 router 尽量按照 views 中的结构保持一致 store 按照业务进行拆分不同的 js 文件</p><h3 id="_2-2-4-注释说明" tabindex="-1"><a class="header-anchor" href="#_2-2-4-注释说明" aria-hidden="true">#</a> 2.2.4 注释说明</h3><p>整理必须加注释的地方</p><ul><li>公共组件使用说明</li><li>api 目录的接口 js 文件必须加注释</li><li>store 中的 state, mutation, action 等必须加注释</li><li>vue 文件中的 template 必须加注释，若文件较大添加 start end 注释</li><li>vue 文件的 methods，每个 method 必须添加注释</li><li>vue 文件的 data, 非常见单词要加注释</li></ul><h3 id="_2-2-5-其他" tabindex="-1"><a class="header-anchor" href="#_2-2-5-其他" aria-hidden="true">#</a> 2.2.5 其他</h3><h4 id="_1-尽量不要手动操作-dom" tabindex="-1"><a class="header-anchor" href="#_1-尽量不要手动操作-dom" aria-hidden="true">#</a> 1) 尽量不要手动操作 DOM</h4><p>因使用 vue 框架，所以在项目开发中尽量使用 vue 的数据驱动更新 DOM，尽量（不到万不得已）不要手动操作 DOM，包括：增删改 dom 元素、以及更改样式、添加事件等。</p><h4 id="_2-删除无用代码" tabindex="-1"><a class="header-anchor" href="#_2-删除无用代码" aria-hidden="true">#</a> 2) 删除无用代码</h4><p>因使用了 git/svn 等代码版本工具，对于无用代码必须及时删除，例如：一些调试的 console 语句、无用的弃用功能代码。</p></div></div><footer class="page-meta"><div class="meta-item edit-link"><span class="xicon-container left meta-item-label"><!--[--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" class="xicon-icon" style="width:20px;height:20px;font-size:20px;color:inherit;"><path d="M2 26h28v2H2z" fill="currentColor"></path><path d="M25.4 9c.8-.8.8-2 0-2.8l-3.6-3.6c-.8-.8-2-.8-2.8 0l-15 15V24h6.4l15-15zm-5-5L24 7.6l-3 3L17.4 7l3-3zM6 22v-3.6l10-10l3.6 3.6l-10 10H6z" fill="currentColor"></path></svg><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Edit this page<!--]--></span></span></div><div class="meta-item last-updated"><span class="xicon-container left meta-item-label"><!--[--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" class="xicon-icon" style="width:20px;height:20px;font-size:20px;color:inherit;"><path d="M26 4h-4V2h-2v2h-8V2h-2v2H6c-1.1 0-2 .9-2 2v20c0 1.1.9 2 2 2h20c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 22H6V12h20v14zm0-16H6V6h4v2h2V6h8v2h2V6h4v4z" fill="currentColor"></path></svg><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Last Updated 2023-04-12 01:49:46<!--]--></span></span></div></footer><!----><!----></main><!--]--><div class="page-catalog-container"><h5 class="tip">文章目录</h5><ul><!--[--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/wb/docs/theme-reco/standard.html#一-命名规范" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="(一) 命名规范"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->(一) 命名规范<!--]--></span></span><!--[--><!--]--></a></li><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/docs/theme-reco/standard.html#_1-1-1-项目命名" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="1.1.1 项目命名"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->1.1.1 项目命名<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/docs/theme-reco/standard.html#_1-1-2-目录命名" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="1.1.2 目录命名"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->1.1.2 目录命名<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/docs/theme-reco/standard.html#_1-1-3-js、css、scss、html、png-文件命名" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="1.1.3 JS、CSS、SCSS、HTML、PNG 文件命名"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->1.1.3 JS、CSS、SCSS、HTML、PNG 文件命名<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/docs/theme-reco/standard.html#_1-1-4-命名严谨性" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="1.1.4 命名严谨性"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->1.1.4 命名严谨性<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/wb/docs/theme-reco/standard.html#二-html-规范-vue-template-同样适用" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="(二)	HTML 规范（Vue Template 同样适用）"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->(二)	HTML 规范（Vue Template 同样适用）<!--]--></span></span><!--[--><!--]--></a></li><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/docs/theme-reco/standard.html#_1-2-1-html-类型" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="1.2.1 HTML 类型"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->1.2.1 HTML 类型<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/docs/theme-reco/standard.html#_1-2-2-缩进" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="1.2.2 缩进"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->1.2.2 缩进<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/docs/theme-reco/standard.html#_1-2-3-分块注释" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="1.2.3 分块注释"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->1.2.3 分块注释<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/docs/theme-reco/standard.html#_1-2-4-语义化标签" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="1.2.4 语义化标签"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->1.2.4 语义化标签<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/docs/theme-reco/standard.html#_1-2-5-引号" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="1.2.5 引号"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->1.2.5 引号<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/wb/docs/theme-reco/standard.html#三-css-规范" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="(三)	CSS 规范"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->(三)	CSS 规范<!--]--></span></span><!--[--><!--]--></a></li><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/docs/theme-reco/standard.html#_1-3-1-命名" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="1.3.1 命名"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->1.3.1 命名<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/docs/theme-reco/standard.html#_1-3-2-选择器" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="1.3.2 选择器"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->1.3.2 选择器<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/docs/theme-reco/standard.html#_1-3-3-尽量使用缩写属性" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="1.3.3 尽量使用缩写属性"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->1.3.3 尽量使用缩写属性<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/docs/theme-reco/standard.html#_1-3-4-每个选择器及属性独占一行" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="1.3.4 每个选择器及属性独占一行"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->1.3.4 每个选择器及属性独占一行<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/docs/theme-reco/standard.html#_1-3-5-省略-0-后面的单位" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="1.3.5 省略 0 后面的单位"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->1.3.5 省略 0 后面的单位<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/docs/theme-reco/standard.html#_1-3-6-避免使用-id-选择器及全局标签选择器防止污染全局样式" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="1.3.6 避免使用 ID 选择器及全局标签选择器防止污染全局样式"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->1.3.6 避免使用 ID 选择器及全局标签选择器防止污染全局样式<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/wb/docs/theme-reco/standard.html#四-less-规范" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="(四)	LESS 规范"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->(四)	LESS 规范<!--]--></span></span><!--[--><!--]--></a></li><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/docs/theme-reco/standard.html#_1-4-1-代码组织" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="1.4.1 代码组织"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->1.4.1 代码组织<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/docs/theme-reco/standard.html#_1-4-2-避免嵌套层级过多" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="1.4.2 避免嵌套层级过多"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->1.4.2 避免嵌套层级过多<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/wb/docs/theme-reco/standard.html#五-javascript-规范" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="(五)	Javascript 规范"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->(五)	Javascript 规范<!--]--></span></span><!--[--><!--]--></a></li><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/docs/theme-reco/standard.html#_1-5-1-命名" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="1.5.1 命名"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->1.5.1 命名<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/docs/theme-reco/standard.html#_1-5-2-代码格式" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="1.5.2 代码格式"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->1.5.2 代码格式<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/docs/theme-reco/standard.html#_1-5-3-字符串" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="1.5.3 字符串"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->1.5.3 字符串<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/docs/theme-reco/standard.html#_1-5-4-对象声明" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="1.5.4 对象声明"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->1.5.4 对象声明<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/docs/theme-reco/standard.html#_1-5-5-使用-es6" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="1.5.5 使用 ES6+"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->1.5.5 使用 ES6+<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/docs/theme-reco/standard.html#_1-5-6-括号" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="1.5.6 括号"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->1.5.6 括号<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/docs/theme-reco/standard.html#_1-5-7-undefined-判断" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="1.5.7 undefined 判断"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->1.5.7 undefined 判断<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/docs/theme-reco/standard.html#_1-5-8-条件判断和循环最多三层" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="1.5.8 条件判断和循环最多三层"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->1.5.8 条件判断和循环最多三层<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/docs/theme-reco/standard.html#_1-5-9this-的转换命名" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="1.5.9	this 的转换命名"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->1.5.9	this 的转换命名<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/docs/theme-reco/standard.html#_1-5-10-慎用-console-log" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="1.5.10 慎用 console.log"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->1.5.10 慎用 console.log<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/wb/docs/theme-reco/standard.html#一-vue-编码基础" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="(一) Vue 编码基础"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->(一) Vue 编码基础<!--]--></span></span><!--[--><!--]--></a></li><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/docs/theme-reco/standard.html#_2-1-1-组件规范" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="2.1.1. 组件规范"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->2.1.1. 组件规范<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/docs/theme-reco/standard.html#_2-1-2-模板中使用简单的表达式" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="2.1.2. 模板中使用简单的表达式"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->2.1.2. 模板中使用简单的表达式<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/docs/theme-reco/standard.html#_2-1-3-指令都使用缩写形式" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="2.1.3 指令都使用缩写形式"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->2.1.3 指令都使用缩写形式<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/docs/theme-reco/standard.html#_2-1-4-标签顺序保持一致" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="2.1.4 标签顺序保持一致"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->2.1.4 标签顺序保持一致<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/docs/theme-reco/standard.html#_2-1-5-必须为-v-for-设置键值-key" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="2.1.5 必须为 v-for 设置键值 key"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->2.1.5 必须为 v-for 设置键值 key<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/docs/theme-reco/standard.html#_2-1-6-v-show-与-v-if-选择" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="2.1.6 v-show 与 v-if 选择"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->2.1.6 v-show 与 v-if 选择<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/docs/theme-reco/standard.html#_2-1-7-script-标签内部结构顺序" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="2.1.7 script 标签内部结构顺序"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->2.1.7 script 标签内部结构顺序<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/docs/theme-reco/standard.html#_2-1-8-vue-router-规范" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="2.1.8 Vue Router 规范"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->2.1.8 Vue Router 规范<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/wb/docs/theme-reco/standard.html#二-vue-项目目录规范" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="(二) Vue 项目目录规范"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->(二) Vue 项目目录规范<!--]--></span></span><!--[--><!--]--></a></li><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/docs/theme-reco/standard.html#_2-2-1-基础" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="2.2.1 基础"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->2.2.1 基础<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/docs/theme-reco/standard.html#_2-2-2-使用-vue-cli-脚手架" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="2.2.2 使用 Vue-cli 脚手架"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->2.2.2 使用 Vue-cli 脚手架<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/docs/theme-reco/standard.html#_2-2-3-目录说明" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="2.2.3 目录说明"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->2.2.3 目录说明<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/docs/theme-reco/standard.html#_2-2-4-注释说明" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="2.2.4 注释说明"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->2.2.4 注释说明<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/wb/docs/theme-reco/standard.html#_2-2-5-其他" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="2.2.5 其他"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->2.2.5 其他<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--]--><!--]--></ul></div></div></div></div><!----><!----><!--]--></div>
    <script type="module" src="/wb/assets/app-32a7af8e.js" defer></script>
  </body>
</html>
